<template>
    <div class="bread">
        <router-link :to="{name:item.name}" v-for="item in data" :key="item.name" >{{item.meta.name+seprator}}</router-link>
        
    </div>
</template>
<script setup>
import { watchEffect ,toRefs} from "vue";
//vue3.2后defineProps/defineEmits不需要引入，已经在全局了
//声明props
let props=defineProps({
    data:{
        type:Array,
        default(){
            return []
        }
    },
    seprator:{
        type:String,
        default(){
            return "/"
        }
    }
})
watchEffect(()=>{
    // console.log(props.data);
})

//解构props
let {data,seprator}=toRefs(props)
console.log(data);
// console.log(props);
</script>
<style scoped>
.bread{
    background-color: lightblue;
    border: 1px solid;
}
.bread a{
    font-size: 16px;
    font-weight: 700;
    margin: 0 5px;
    color:black;
}
</style>